<template>
  <div>
    <div class="d-flex mt-2 w-100">
      <custom-radio-tag1 class="mb-1 w-100" :list="list" :value="index" is-scroll @change="tagChange" />
    </div>
    <customSearch ref="customSearch" placeholder="请输入企业名称" :title="active + '列表'" :total="total" :is-super-search="active === '环境事件' || active === '行政处罚'" @search="handleSearch" @superSearch="openSuperSearch" />
    <div v-if="listData.length > 0" class="common_list">
      <div v-for="(item, indes) in listData" :key="indes" class="list_item" @click="goToDetails(item)">
        <div class="content_area">
          <div class="number_order">{{ indes + 1 }}</div>
          <div class="right_content">
            <div class="content_title" style="max-width: 100%">
              {{ active === '环境事件' ? item.eventName : item.companyName }}
              <span v-if="active === '环境事件'">{{ item.eventLevel }}</span>
            </div>
            <ul>
              <template v-if="active === '环境事件'">
                <li>
                  <i class="iconfont c-text-color1">&#xe725;</i>
                  <div class="label">企业名称：</div>
                  <div class="value">{{ item.companyName }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color2">&#xe6bb;</i>
                  <div class="label">事故类别：</div>
                  <div class="value">{{ item.eventType }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color3">&#xe67a;</i>
                  <div class="label">人员伤亡情况：</div>
                  <div class="value">{{ item.eventDeath }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color4">&#xe685;</i>
                  <div class="label">事故发生时间：</div>
                  <div class="value">{{ item.eventTime }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color5">&#xe685;</i>
                  <div class="label">事件发生地点：</div>
                  <div class="value">{{ item.eventPlace }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color6">&#xe685;</i>
                  <div class="label">事件来源：</div>
                  <div class="value">{{ item['eventSource'] }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color7">&#xe685;</i>
                  <div class="label">审核状态：</div>
                  <div class="value">{{ item['auditResult'] }}</div>
                </li>
              </template>
              <template v-else>
                <li>
                  <i class="iconfont c-text-color1">&#xe611;</i>
                  <div class="label">决定文书号：</div>
                  <div class="value">{{ item.decisionNumber }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color2">&#xe634;</i>
                  <div class="label">处罚年度：</div>
                  <div class="value">{{ item.punishYear }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color3">&#xe634;</i>
                  <div class="label">处罚种类：</div>
                  <div class="value">{{ item.pubishType }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color4">&#xe634;</i>
                  <div class="label">处罚事项：</div>
                  <div class="value">{{ item.punishAccording }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color5">&#xe634;</i>
                  <div class="label">罚款金额（万元）：</div>
                  <div class="value">{{ item.punishMoney }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color6">&#xe634;</i>
                  <div class="label">处罚依据：</div>
                  <div class="value">{{ item.pubishType }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color7">&#xe634;</i>
                  <div class="label">结案情况：</div>
                  <div class="value">{{ item.settleLawsuit }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color1">&#xe634;</i>
                  <div class="label">填报时间：</div>
                  <div class="value">{{ item.fillTime }}</div>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <template v-if="active === '环境事件'">
            <div class="checkbox-title">事故名称</div>
            <el-input v-model="form.eventName" class="mb-1" placeholder="请输入事故名称" size="small" clearable />
            <custom-timer title="事故发生时间" type="date" :start.sync="form.startTime" :end.sync="form.endTime" />
            <customPopCheckbox :is-multiple="false" :radio-list="eventLevelOptions" :radio-value.sync="form.eventLevel" title="事故等级" @radioChange="radioChangeHandler" />
            <customPopCheckbox :is-multiple="false" :radio-list="eventTypeOptions" :radio-value.sync="form.eventType" title="事故类别" />
            <customPopCheckbox :list="sourceArr" :check-value.sync="form.eventSource" title="事件来源" />
          </template>
          <template v-if="active === '行政处罚'">
            <div class="checkbox-title">决定书文号</div>
            <el-input v-model="form.decisionNumber" class="mb-1" placeholder="请输入决定书文号名称" size="small" clearable />
            <custom-timer type="date" title="填报时间" :start.sync="form.startTime" :end.sync="form.endTime" :is-interval="true" :picker-title="'请选择填报时间'" />
            <custom-timer type="year" placeholder="请选择处罚年度" :is-title="true" title="处罚年度" :is-interval="false" :date-value.sync="form.punishYear" />
            <customPopCheckbox :list="selectOptionAll['处罚种类']" :check-value.sync="form.pubishType" title="处罚种类" />
            <customPopCheckbox :list="selectOptionAll['结案情况']" :check-value.sync="form.settleLawsuit" title="结案情况" />
          </template>
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { environmentEventList, punishList, refEventLevel, refEventType } from '@/api/commonPage/AccidentEvents'
import { currentTime } from '@/utils/dayJs'

export default {
  mixins: [commonList],
  data() {
    return {
      index: 0,
      active: '环境事件',
      form: {
        pageNum: 1,
        pageSize: 10,
        eventName: '',
        eventSource: '',
        eventType: '',
        companyIds: -1,
        eventLevel: '',
        decisionNumber: '',
        startTime: currentTime('年') + '-01-01',
        endTime: currentTime('年月日'),
        pubishType: '',
        settleLawsuit: '',
        punishYear: ''
      },
      sourceArr: [
        {
          label: '集团新增',
          value: '集团新增'
        },
        {
          label: '企业新增',
          value: '企业新增'
        }
      ],
      kindArr: [
        {
          label: '物体打击',
          name: '物体打击',
          disabled: false
        },
        {
          label: '车辆伤害',
          name: '车辆伤害',
          disabled: false
        },
        {
          label: '机械伤害',
          name: '机械伤害',
          disabled: false
        }
      ],
      levelArr: [
        {
          label: '特别重大事故',
          name: '特别重大事故',
          disabled: false
        },
        {
          label: '重大事故',
          name: '重大事故',
          disabled: false
        },
        {
          label: '较大事故',
          name: '较大事故',
          disabled: false
        }
      ],
      list: [
        {
          label: '环境事件',
          listFun: environmentEventList
        },
        {
          label: '行政处罚',
          listFun: punishList
        }
      ],
      current: '',
      listFun: environmentEventList,
      listData: [],
      eventLevelOptions: [],
      eventTypeOptions: []
    }
  },
  watch: {
    $route(to, form) {
      if (to.query.auditResult) {
        this.listData.forEach(v => {
          if (to.query.environmentEventId === v.environmentEventId) {
            v.auditResult = to.query.auditResult
          }
        })
      }
    }
  },
  created() {
    this.refEventLevel()
  },
  mounted() {
    const { current, active } = this.$route.query
    if (current) {
      this.current = current
    }
    if (active) {
      this.active = active
      this.index = active === '环境事件' ? 0 : 1
      this.listFun = this.list.find(val => val.label === active).listFun
      if (this.active === '行政处罚') {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    }
    this.companyList()
  },
  methods: {
    tagChange(tagArg) {
      this.index = tagArg.index
      this.active = tagArg.item.label
      this.listFun = tagArg.item.listFun
      this.resetSuperSearch()
      this.form.pageNum = 1
      this.listData = []
      if (this.active === '环境事件') {
        this.form.startTime = currentTime('年') + '-01-01'
        this.form.endTime = currentTime('年月日')
      }
      this.companyList()
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.companyList()
    },
    /**
     * 单选框绑定值改变的回调
     */
    radioChangeHandler(val) {
      this.form.eventType = ''
      val === '' ? this.refEventType('-1') : this.refEventType(val)
    },
    // 企业名称查询
    handleSearch(value) {
      this.form.companyName = value
      // this.form.ccompanyName = value
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.form.industryType = args.selectedOptions[args.selectedOptions.length - 1].text || ''
    },
    // 重置
    resetSuperSearch() {
      const pageSize = this.form.pageSize
      const pageNum = this.form.pageNum
      Object.keys(this.form).forEach(val => {
        this.form[val] = ''
      })
      this.$refs.customSearch.restore()
      this.form.pageSize = pageSize
      this.form.pageNum = pageNum
      this.form.companyIds = -1
    },
    // 跳转详情
    goToDetails(item) {
      const { environmentEventId, punishId } = item
      const active = this.index === 0 ? '环境事件' : '行政处罚'
      this.$router.push({
        path: '/staging/AccidentEventsDetail',
        query: { id: environmentEventId || punishId, current: this.current, active: active }
      })
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取企业列表数据
    async companyList() {
      console.log(this.form)
      this.$refs.customLoadmore.loadStatus = true
      // this.layout.showLoading()
      const { status, data } = await this.listFun(this.form)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      // this.layout.hideLoading()
    },
    // 获取事件等级
    async refEventLevel() {
      const { status, data } = await refEventLevel()
      if (status === 0 && data) {
        this.eventLevelOptions = data.map(val => ({
          label: val.codename,
          value: val.codeid
        }))
      }
    },
    // 获取事件类别
    async refEventType(value) {
      const { status, data } = await refEventType({ codeId: value })
      if (status === 0 && data) {
        this.eventTypeOptions = data.map(val => ({
          label: val.codename,
          value: val.codeid
        }))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .checkbox-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .environmentComponent__value {
    line-height: 36px;
  }
</style>
